<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{time}} -->
        <button @click="add">add</button>
        <!-- {{newTime}} {{newTime}} {{newTime}} {{newTime}}
        <div id="box"></div> -->
        <!-- {{formatData}}  {{formatData}}  {{formatData}}  {{formatData}} -->
        {{obj.name}}
    </div>
    <script src="./vue.js"></script>
    <script>
        var count = 3
        new Vue({
            el: "#app",
            data: {
                time: '2020-12-14 12:12:21',
                num: 1,

                obj: {
                    name: "张三",
                    age: '',
                    tel: ''
                }
            },
            computed: {
                // newTime() { // computed得到的结果会被缓存 只有当computed依赖的属性发生变化时才会再次调用
                //     console.log('计算属性被调用了')
                //     var time = this.time + 1
                //     return time
                // }
                // newTime:{
                //     set(value) {
                //         if(value > 10) {
                //             return
                //         }
                //         this.time = value
                //     },
                //     get() {
                //         return this.time
                //     }
                // }
                formatData() { // method中的数据不会被缓存调用一次执行一次
                    console.log(1)
                    var date = new Date(this.time)
                    var year = date.getFullYear()
                    var month = date.getMonth() + 1
                    var day = date.getDate() 
                    return year + '-' + month + '-' + day
                },

                newNum() {
                    // console.log('num变化了')
                    var num = this.num++
                    return num
                }
            },
            created() {
                // console.log(this)
            },

            methods: {
                add() {
                    // console.log(this)
                    // this.newTime.$count++
                    // this.newTime++
                    // this.num++
                    this.obj.name = "李四"
                }
                // formatData() { // method中的数据不会被缓存调用一次执行一次
                //     // console.log(1)
                //     var date = new Date(this.time)
                //     var year = date.getFullYear()
                //     var month = date.getMonth() + 1
                //     var day = date.getDate() 
                //     return year + '-' + month + '-' + day
                // }
            },

            watch:{
                // watch是监听是属性可以直接监听数据发生变化 函数中有两个参数 第一个是数据要变化成的新值第二个是老值
                // num(to, from) {
                //     console.log(to, from)
                // }
                // 'obj.name'(to, from) {
                //     console.log(to)
                // }

                obj:{
                    deep: true, // 开启对象的深度监听 开启后可以监听到对象内部数据的变化
                    handler(val) {
                        console.log(val)
                    },
                    immediate: true // 进入页面后立即出发一次数据监听
                }
            }
        })
    </script>
</body>
</html>